<template>
  <div class="product-list-main">

    <el-card shadow="never">
      <div slot="header">
        <span>商品分类数据:{{ mixinName }}</span>
        <el-button type="primary" size="small" @click="goAdd">新增</el-button>

      </div>
      <el-table :data="productList" border stripe>
        <el-table-column
          type="index"
          label="#"
          :width="50"
        />
        <el-table-column
          prop="pic"
          label="商品图片"
          :width="200"
        >
          <template slot-scope="scope">
            <img class="product-pic" :src="scope.row.pic" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          :width="200"
        />
        <el-table-column
          label="商品价格"
          :width="200"
        >
          <template slot-scope="scope">
            <p>原价: {{ scope.row.originalPrice }}</p>
            <p>现价: {{ scope.row.price }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          :width="200"
        />
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

  </div>
</template>

<script>
import { productsByPage as productListApi } from '@/api/product/index'
// 引入混入对象
import mixin from '@/mixins/index'
export default {
  name: 'ProductList',
  components: {

  },
  // 注册混入对象
  mixins: [mixin],
  data() {
    return {
      // 混入的变量如果和当前页面的变量冲突,会被覆盖
      // mixinName: '认真写的一个混入对象',
      productList: [] // 商品列表
    }
  },
  computed: {

  },
  created() {
    // 初始化
    this.getProductList()
  },
  mounted() {

  },
  methods: {
    // 获取列表
    getProductList() {
      const { start, limit } = this.page
      productListApi(start, limit)
        .then(res => {
          const { success, data, message: errMsg } = res
          if (success) {
            // 获取数据
            const { rows, total } = data
            // 获取商品列表
            this.productList = rows
            // 设置分页数据
            this.page.totalCount = total
          } else {
            this.$message.error(errMsg)
          }
        })
    },
    // 去新增页面
    goAdd() {
      this.$router.push({ name: 'productAdd' })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped lang="scss">
.product-list-main{
  .product-pic{
    width: 100px;
    height: 60px;
  }
}

</style>
